<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ES6</title>
		<style>
		</style>
	</head>

	<body>

		<div id="box">
			<button>获取地址</button>
			<p></p>
		</div>
		<input type="text">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<script>
			
			
			let arr = [1,2,3,[4,5,6,[7,8,9]]]
			
			let res= arr.flat().flat()
			
			
			console.log(res);
			
		
			/*
			95  诞生
			97 ES1
			98 ES2
			99 ES3
			2008 ES4废弃
			2009 ES5
			2015 ES6  ES2015
			ES2022
			什么是ES6
			ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范
			ES6 就是 ES2015  
			
			javascript  跟 ECMAScript的 区别是什么?
			
			ECMAScript 描述了JavaScript的语法和基本对象
			JavaScript由ECMAScript、DOM、BOM三部分组成
			
			
			
			ES6新增语法
			1.let const  var 的区别
			
			
			2.  ...运算符     for…of 和 for…in
				...合并数组
				
				模板字符串
				`我的名字叫${obj.name},今年${obj.age}岁了`
				
				函数的参数默认值  
				let fn = (name,age = '默认值')=>{
					console.log(`我的名字叫${name},今年${age}岁了`);
				}
				Symbol
			
			3.ES6 对象的方法
			Object.keys()    遍历对象里面的key 返回一个数组
			Object.values() 遍历对象里面的value 返回一个数组
			Object.assign(obj1,obj2,obj3)   合并多个对象   将多个对象合并到obj1里面 对于obj1来说是 浅拷贝
			书写方法简写 属性 函数
			let  a = 10
			let  b = 20
			let obj = {
				a,
				b,
				c:30,
				d(){
					console.log(1);
				},
				f:'f'
			}
			
			4.解构赋值
			ES6中允许从数组或对象中提取值，按照对应位置，对变量赋值，这被称为解构（Destructuring）。
			let  [a,b] = [1]   a 1  b undefined
			let  [a,b=40] = [1]   a 1  b 40
			
			let obj = {
				a:10,
				b:20,
				c:30,
				d(){
					console.log(1);
				},
				f:'f'
			}
			let {a:a,b,c,d,z=50}  = obj
			
			function fn ({a},{b,c}){
				console.log(a,b,c);
			}
			let obj = {a:10}
			let obj1 = {b:20,c:30}
			fn(obj,obj1)
			
			- 解构赋值能快速的交换变量
			- 解构赋值就是把数据结构分解，然后给变量进行赋值
			- 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
			- 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
			- **利用解构赋值能够让我们方便的去取对象中的属性跟方法**
			
			5.箭头函数() => {}
			this指向    不定参
			
			const obj = {
				num: 10,
				hello: function() {
					console.log(this); 
					setTimeout(() => {
						console.log(this);
					});
				}
			}
			obj.hello();
			
			
			let  fn1 = a=>a
			let fn1 = ()=>{
				return a
			}
			
			
			6.Set
			ES6 提供了新的数据结构  Set。它类似于数组，但是成员的值都是**唯一**的，没有重复的值。
			Set本身是一个构造函数，用来生成  Set  数据结构
			实例方法
			- add(value)：添加某个值，返回 Set 结构本身
			- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
			- has(value)：返回一个布尔值，表示该值是否为 Set 的成员
			- clear()：清除所有成员，没有返回值
			
			7. map数据类型  
				特点：相当与 object ,但key的值比较多样化
				- set(key,val)：添加某个值，或者是设置某个值
				- delete(key)：删除某个值，
				- has(key)：返回一个布尔值，表示map里面是否有  key
				- get(key)：获取 key对应的val
				let m = new Map();
				let o = new Object();
				//给map添加数据 set
				m.set("name","春天");
				m.set(1,"我是数字");
				m.set(o,"我是一个对象");
				m.set(10.1,{"age":20});
				//输出
				console.log(m);
				//获取map中的值  get 
				console.log(m.get('name'));
				console.log(m.get(1));
				console.log(m.get('1'));//undefined
				console.log(m.get(o));
				
				//has 判断map对象中是否存在相应的键名
				console.log(m.has(1));//true
			下`	console.log(m.has("1"));//false
				
				//delete 删除
				m.delete(o);
				console.log(m);
			8.Promise
			//回调地狱   当我们去请求数据的时候 一层层嵌套 使用回调函数 那数据 

			//Promise 的三种状态  执行中peding  成功 resolve  失败rejecte
			// new Peomise() 返回的对象 能够  执行    .then获取成功  得到的数据   失败 执行 .catch
			
			
			Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
			它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
			所谓Promise，简单说就是一个容器，里面**保存着某个未来才会结束的事件** **（通常是一个异步操作）的结果**。
			从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，
			各种异步操作都可以用同样的方法进行处理。
			
			 Promise.all  打包多个 Promise pro1,pro2...对象 ,返回一个新的Promise对象 
			 必须所有的  Promise 对象 pro1,pro2...都执行成功 才成功 then 否则失败 进入 catch
			let newPro = Promise.all([pro1,pro2])
			console.log(newPro);
			newPro.then(data=>{
				console.log(data);
			}).catch(err=>{
				console.log(err)
			})
			
			Promise.any  打包多个 Promise 对象 pro1,pro2...,返回一个新的Promise对象  
			当其中一个成功执行 就 成功 进入then  只有  所有的 Promise 对象 pro1,pro2... 都执行失败  才进入catch
			let newPro = Promise.any([pro1,pro2])
			console.log(newPro);
			newPro.then(data=>{
				console.log(data);
			}).catch(err=>{
				console.log(err)
			})
			
			9.async await 的语法糖 es7之后才出现 和 promise 、generator都有一定的关系
				async
				async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。
				因此对async函数可以直接then，返回值就是then方法传入的函数。
				await
				await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。
				await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），
				且取到值后语句才会往下执行；
				如果不是Promise对象：把这个非promise的东西当做await表达式的结果。
				let a= 20
				function log(){
					setTimeout(()=>{
						return 888
					},1000)
				}
				async function aa(){
					let a = await log()
					console.log(a);
					let b = await new Promise((a,b)=>{
						setTimeout(()=>{
							a(10)
						},1000)
					})
					console.log(9999);
					console.log(a);
				}
				console.log( aa());

			10.es6之后的一些特性 es7-es9
			 ① 指数运算符 
				 console.log(2**3);//8
				 console.log(Math.pow(2,3));//8
			 
			 ② includes   数组是否包含某元素
				 let arr = [1,2,3,4];
				 arr.includes(6)   false
				 //includes 也适用于字符串
				 let str = '1,2,3,4';
				 str.includes(3)   true
				 
			 ③ 去掉前后空格  trim trimStart trimEnd
			 
			 ④ flat 将多维数组打平
				 const numbers1 = [1, 2, [3, 4, [5, 6]]]
				 console.log(numbers1.flat())// [1, 2, 3, 4, [5, 6]]
				 const numbers2 = [1, 2, [3, 4, [5, 6]]]
				 console.log(numbers2.flat(2))// [1, 2, 3, 4, 5, 6]
			*/
		</script>
	</body>

</html>